{% extends 'adminuser/base_admin.html' %}

{% block admin_title %}互动分析{% endblock %}

{% block extra_head %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
{% endblock %}

{% block admin_content %}
<div class="row">
    <div class="col-md-12">
        <div class="card mb-4">
            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                <h5 class="mb-0">互动概览</h5>
                <div class="btn-group">
                    <a href="?range=week" class="btn btn-outline-primary {% if time_range == 'week' %}active{% endif %}">7天</a>
                    <a href="?range=month" class="btn btn-outline-primary {% if time_range == 'month' %}active{% endif %}">30天</a>
                    <a href="?range=year" class="btn btn-outline-primary {% if time_range == 'year' %}active{% endif %}">一年</a>
                </div>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-3">
                        <div class="card bg-primary text-white h-100">
                            <div class="card-body">
                                <h6 class="card-title text-white-50">总互动量</h6>
                                <h3 class="mb-0">{{ total_interactions|default:"15,648" }}</h3>
                                <p class="small mt-2 mb-0"><i class="bi bi-graph-up me-1"></i> 较上周增长 {{ interaction_growth|default:"8.7" }}%</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card bg-success text-white h-100">
                            <div class="card-body">
                                <h6 class="card-title text-white-50">点赞总数</h6>
                                <h3 class="mb-0">{{ total_likes|default:"8,742" }}</h3>
                                <p class="small mt-2 mb-0"><i class="bi bi-graph-up me-1"></i> 较上周增长 {{ likes_growth|default:"10.3" }}%</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card bg-info text-white h-100">
                            <div class="card-body">
                                <h6 class="card-title text-white-50">评论总数</h6>
                                <h3 class="mb-0">{{ total_comments|default:"4,251" }}</h3>
                                <p class="small mt-2 mb-0"><i class="bi bi-graph-up me-1"></i> 较上周增长 {{ comments_growth|default:"12.5" }}%</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card bg-warning text-white h-100">
                            <div class="card-body">
                                <h6 class="card-title text-white-50">收藏总数</h6>
                                <h3 class="mb-0">{{ total_favorites|default:"2,655" }}</h3>
                                <p class="small mt-2 mb-0"><i class="bi bi-graph-up me-1"></i> 较上周增长 {{ favorites_growth|default:"7.2" }}%</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-4">
                    <canvas id="interactionTrendChart" height="120"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header bg-light">
                <h5 class="mb-0">分类平均互动</h5>
            </div>
            <div class="card-body">
                <div style="height: 240px">
                    <canvas id="categoryAvgInteractionChart"></canvas>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header bg-light">
                <h5 class="mb-0">互动类型占比</h5>
            </div>
            <div class="card-body">
                <div style="height: 240px">
                    <canvas id="interactionTypeChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="card mb-4">
            <div class="card-header bg-light">
                <h5 class="mb-0">用户互动时间分布</h5>
            </div>
            <div class="card-body">
                <div style="height: 240px">
                    <canvas id="userInteractionTimeChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="card mb-4">
            <div class="card-header bg-light">
                <h5 class="mb-0">热门互动内容</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>排名</th>
                                <th>标题</th>
                                <th>作者</th>
                                <th>分类</th>
                                <th>发布时间</th>
                                <th>浏览量</th>
                                <th>点赞数</th>
                                <th>评论数</th>
                                <th>互动率</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for i in "12345"|make_list %}
                            <tr>
                                <td>{{ forloop.counter }}</td>
                                <td>热门故事标题 #{{ forloop.counter }}</td>
                                <td>作者{{ forloop.counter }}</td>
                                <td>{% cycle '科幻' '奇幻' '悬疑' '爱情' '历史' %}</td>
                                <td>2023-07-{{ forloop.counter|add:"10" }}</td>
                                <td>{{ forloop.counter|add:"600" }}</td>
                                <td>{{ forloop.counter|add:"200" }}</td>
                                <td>{{ forloop.counter|add:"60" }}</td>
                                <td>{{ forloop.counter|add:"5" }}%</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 固定示例数据 - 互动趋势
    const dateLabels = ['6月1日', '6月8日', '6月15日', '6月22日', '6月29日', '7月6日', '7月13日'];
    const likeData = [423, 512, 585, 642, 710, 796, 845];
    const commentData = [182, 215, 256, 278, 304, 348, 372];
    const favoriteData = [124, 145, 168, 185, 205, 228, 245];
    
    // 分类互动数据
    const categoryLabels = ['科幻', '奇幻', '悬疑', '爱情', '历史'];
    const categoryLikeData = [4.8, 4.2, 3.9, 4.5, 3.6];
    const categoryCommentData = [2.5, 1.8, 2.2, 3.1, 1.4];
    
    // 互动时间数据
    const hourLabels = Array.from({length: 24}, (_, i) => `${i}:00`);
    const hourData = [
        5, 3, 2, 1, 1, 2, 5, 12, 20, 25, 28, 30, 
        32, 35, 38, 42, 45, 48, 40, 35, 28, 20, 12, 8
    ];

    // 图表颜色
    const chartColors = [
        'rgba(13, 110, 253, 0.7)',  // 蓝色
        'rgba(25, 135, 84, 0.7)',   // 绿色
        'rgba(255, 193, 7, 0.7)',   // 黄色
        'rgba(220, 53, 69, 0.7)',   // 红色
        'rgba(111, 66, 193, 0.7)',  // 紫色
        'rgba(108, 117, 125, 0.7)', // 灰色
        'rgba(32, 201, 151, 0.7)'   // 青色
    ];

    // 互动趋势图表
    const interactionTrendCtx = document.getElementById('interactionTrendChart').getContext('2d');
    const interactionTrendChart = new Chart(interactionTrendCtx, {
        type: 'line',
        data: {
            labels: dateLabels,
            datasets: [
                {
                    label: '点赞',
                    data: likeData,
                    borderColor: 'rgba(13, 110, 253, 1)',
                    backgroundColor: 'rgba(13, 110, 253, 0.2)',
                    tension: 0.3,
                    borderWidth: 2,
                    fill: true
                },
                {
                    label: '评论',
                    data: commentData,
                    borderColor: 'rgba(25, 135, 84, 1)',
                    backgroundColor: 'rgba(25, 135, 84, 0.2)',
                    tension: 0.3,
                    borderWidth: 2,
                    fill: true
                },
                {
                    label: '收藏',
                    data: favoriteData,
                    borderColor: 'rgba(255, 193, 7, 1)',
                    backgroundColor: 'rgba(255, 193, 7, 0.2)',
                    tension: 0.3,
                    borderWidth: 2,
                    fill: true
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            plugins: {
                legend: {
                    position: 'top',
                    labels: {
                        font: {
                            size: 11
                        }
                    }
                },
                title: {
                    display: true,
                    text: '互动趋势图'
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        font: {
                            size: 11
                        }
                    }
                },
                x: {
                    ticks: {
                        font: {
                            size: 11
                        }
                    }
                }
            }
        }
    });
    
    // 分类平均互动图表
    const categoryAvgInteractionCtx = document.getElementById('categoryAvgInteractionChart').getContext('2d');
    const categoryAvgInteractionChart = new Chart(categoryAvgInteractionCtx, {
        type: 'bar',
        data: {
            labels: categoryLabels,
            datasets: [
                {
                    label: '平均点赞',
                    backgroundColor: 'rgba(13, 110, 253, 0.7)',
                    data: categoryLikeData
                },
                {
                    label: '平均评论',
                    backgroundColor: 'rgba(25, 135, 84, 0.7)',
                    data: categoryCommentData
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'top',
                    labels: {
                        font: {
                            size: 11
                        }
                    }
                },
                title: {
                    display: true,
                    text: '各分类平均互动量'
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        font: {
                            size: 11
                        }
                    }
                },
                x: {
                    ticks: {
                        font: {
                            size: 11
                        }
                    }
                }
            }
        }
    });
    
    // 互动类型占比图表
    const interactionTypeCtx = document.getElementById('interactionTypeChart').getContext('2d');
    const interactionTypeChart = new Chart(interactionTypeCtx, {
        type: 'doughnut',
        data: {
            labels: ['点赞', '评论', '收藏'],
            datasets: [{
                data: [65, 25, 10],
                backgroundColor: [
                    'rgba(13, 110, 253, 0.7)',
                    'rgba(25, 135, 84, 0.7)',
                    'rgba(255, 193, 7, 0.7)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'right',
                    labels: {
                        font: {
                            size: 11
                        }
                    }
                },
                title: {
                    display: true,
                    text: '互动类型分布'
                }
            }
        }
    });
    
    // 用户互动时间分布图表
    const userInteractionTimeCtx = document.getElementById('userInteractionTimeChart').getContext('2d');
    const userInteractionTimeChart = new Chart(userInteractionTimeCtx, {
        type: 'bar',
        data: {
            labels: hourLabels,
            datasets: [{
                label: '互动量',
                data: hourData,
                backgroundColor: 'rgba(111, 66, 193, 0.7)',
                borderColor: 'rgba(111, 66, 193, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                },
                title: {
                    display: true,
                    text: '24小时互动时间分布'
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        font: {
                            size: 11
                        }
                    }
                },
                x: {
                    ticks: {
                        font: {
                            size: 10
                        },
                        maxRotation: 90,
                        minRotation: 45
                    }
                }
            }
        }
    });
});
</script>
{% endblock %} 